<template>
  <el-dialog
      :title="dialogLandTitle"
      :model-value="dialogVisible"
      width="40%"
      @close="handleClose"
  >
    <el-form :model="form" ref="formRef" label-width="20%" :rules="rules">
        <el-form-item label="地块名称" prop="chandi">
            <el-input v-model="form.chandi" />
        </el-form-item>
      <el-form-item label="详细地址" prop="detailaddress">
        <el-input v-model="form.detailaddress" clearable/>
      </el-form-item>
      <el-form-item label="地块负责人" prop="cdfzr">
        <el-input v-model="form.cdfzr" />
      </el-form-item>
        <el-form-item label="图片名称">
            <el-input disabled v-model="tpmc" />
        </el-form-item>
      <el-form-item label="地块实图">
          <my-upload
                  :file-type="'land'"
                  @get-form-pic-value="getFormPicValue"
          >
          </my-upload>
      </el-form-item>
      <el-form-item label="地块用途" prop="yt">
        <el-input v-model="form.yt" clearable/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, onMounted} from 'vue'
import MyUpload from "@/components/commons/myUpload.vue";

const tpmc = ref('')
onMounted(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
      form.value.lat = position.coords.latitude
      form.value.lng = position.coords.longitude
    })
  } else {
    console.log("Geolocation is not supported by this browser.")
  }
  form.value = props.dialogTableValue
  console.log(form.value)
})
const props = defineProps({
  dialogLandTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: {}
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

/*设置 ref 属性时，可以通过这个引用来访问表单组件的方法和属性
ref 属性只能用于注册一个引用，不能用于绑定数据或执行其他操作。
另外，由于 ref 属性只在当前组件及其子组件中生效，
因此不能将表单组件的 ref 属性设置在父组件上，否则无法访问表单组件的方法和属性。*/
const formRef = ref(null)
const form = ref({
  detailaddress: "",
  chandi: "",
  yt: "",
  cdfzr: "",
  lat: "",
  lng: '',
  qydm: '',
  cdbh: '',
  jldw: '',
  tiliang: '',
  status: '',
  bh: '',
  cdt: '',
})

const rules = ref({
  detailaddress: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  chandi: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  yt: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
    cdfzr: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const getFormPicValue = (value)=> {
    console.log(value)
    form.value.cdt = value.pic
    tpmc.value = value.tpmc
}
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = () => {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}
</script>

<style scoped>

</style>


